import Taro from '@tarojs/taro'
import {ScrollView, View} from '@tarojs/components'

import './topColumn.less'

export default class TopColumn extends Taro.Component{
  constructor(props) {
    super(props)
  }

  state = {
    data: null,
    width: 'auto',
    currentIndex: 0
  }

  componentWillMount(): void {
    this.setState({
      data: this.props.columnData,
      width: this.props.columnWidth
    })
  }

  onScroll() {}

  click(index: number) {
    this.setState({ currentIndex: index })
  }

  render() {
    let {data,width, currentIndex} = this.state
    return(
      <View className='top-column'>
        <ScrollView
          className='scroll-column'
          scrollX
          scrollWithAnimation
          onScroll={this.onScroll.bind(this)}
        >
          {
            data.map((item, index) => {
              return(
                <View className={index===currentIndex?'scroll-column__title scroll-column__active':'scroll-column__title'}
                      style={{width: width}}
                      onClick={this.click.bind(this, index)}
                >{item.title}</View>
              )
            })
          }
        </ScrollView>


      </View>
    )
  }
}
